<template>
  <div class="Dashboard">
    <!-- 左侧卡片 -->
    <el-card class="box-card">
      <!-- 卡片头部 -->
      <div slot="header" class="clearfix">
        <!-- 头部内容 -->
        <span style="text-align: center; display: block">类别文章数量占比</span>
      </div>
      <!-- 卡片内容: 饼图 -->
      <div class="main-left"></div>
    </el-card>
    <!-- 右侧卡片 -->
    <el-card class="box-card">
      <!-- 卡片头部 -->
      <div slot="header" class="clearfix">
        <!-- 头部内容 -->
        <span style="text-align: center; display: block"
          >文章发布数量月变化</span
        >
      </div>
      <!-- 卡片内容: 条形图 -->
      <div class="main-right"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'Dashboard',
  data() {
    return {
      classes: [],
      articleCreatedTime: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      pieData: [],
    }
  },
  mounted() {
    this.getCategories()
    this.getArticles()
  },

  methods: {
    //获取所有文章
    getArticles() {
      this.$http
        .get('/API/V1/admin/articles', { params: { pagesize: 2000 } })
        .then((data) => {
          const {
            result: { article_infos },
          } = data
          console.log(article_infos)
          // 将文章创建的月份数量依次保存到articleCreatedTime数组
          article_infos.forEach((item) => {
            //拿到月份
            let element = item.pubdate.split('-')[1]
            this.articleCreatedTime[element - 1]++
          })
          //图表配置
          const xDataArr = [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ]
          const yDataArr = this.articleCreatedTime
          // 初始化echarts对象
          const myChart2 = echarts.init(document.querySelector('.main-right'))
          // 准备配置项
          const option2 = {
            xAxis: {
              type: 'category', // 类目 类型
              data: xDataArr,
            },
            yAxis: {
              name: '单位: 篇',
              type: 'value', // 值 类型
              // show: true,
              // position: 'left',
            },
            series: [
              {
                type: 'bar',
                // 显示平均值
                markLine: {
                  data: [
                    {
                      type: 'average',
                      name: '平均值',
                    },
                  ],
                },
                color: '#3fb1ff', //设置柱子颜色
                // 显示数值
                label: {
                  show: true, // 是否可见
                  position: 'top',
                  textStyle: {
                    color: '#878787', //值得颜色
                  },
                },
                // barWidth: '30%', //柱的宽度
                data: yDataArr,
              },
            ],
          }
          // 将配置项设置给echarts实例对象
          myChart2.setOption(option2)
        })
    },
    //发送请求获取所有分类的文章数量
    getCategories() {
      this.$http.get('/API/V1/categories/statistics').then((data) => {
        const {
          result: { category_statistics },
        } = data
        //console.log(category_statistics)
        //准备数据
        this.pieData = category_statistics.map((item) => {
          let { category_alias: name, article_total: value } = item
          return { value, name }
        })
        console.log(this.pieData)

        const myChart1 = echarts.init(document.querySelector('.main-left'))
        //  准备配置项
        const option1 = {
          legend: {
            //图例
            data: this.pieData, //与series的name对应
            left: '15%', //图例的位置，可以用像素，可以用百分比，也可以用center，right等
            top: 10, //图例的位置
            itemWidth: 10, //图例图标的宽
            //itemHeight: 10, //图例图标的高
            textStyle: {
              color: '#878787', //值的具体的颜色
            },
          },
          series: [
            {
              type: 'pie',
              data: this.pieData,
              label: {
                show: true,
                formatter(arg) {
                  return `${arg.data.name}:${arg.data.value}篇\n占比:${arg.percent}%`
                },
                textStyle: {
                  fontSize: 14,
                  lineHeight: 20,
                },
              },
              radius: ['40%', '70%'],
            },
          ],
          color: ['#3AA1FF', '#36CBCB', '#4ECB73', '#FBD437'],
        }
        // // 将配置项设置给echarts实例对象
        myChart1.setOption(option1)
      })
    },
  },
}
</script>
<style>
.el-main {
  padding-top: 40px;
}
.Dashboard {
  display: flex;
  justify-content: space-around;
  margin: 30px 10px;
}
.Dashboard .el-card {
  width: 500px;
}
.box-card {
  width: 580px;
  height: 480px;
}
/* .el-card{} */
.main-left {
  width: 420px;
  height: 400px;
}
.main-right {
  width: 420px;
  height: 400px;
}
</style>
